<template>
  <view class="order-detail-page">
    <!-- 订单基本信息区域 -->
    <view class="order-base-info">
      <view class="info-item">
        <text class="info-label">订单号</text>
        <text class="info-value">{{ orderInfo.orderNo }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间</text>
        <text class="info-value">{{ orderInfo.orderTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">会员姓名</text>
        <text class="info-value">{{ orderInfo.memberName }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">会员手机</text>
        <text class="info-value">{{ orderInfo.memberPhone }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">会员卡号</text>
        <text class="info-value">{{ orderInfo.memberCardNo }}</text>
      </view>
      <view class="info-item total-amount">
        <text class="info-label">订单总额</text>
        <text class="info-value">{{ orderInfo.totalAmount }}</text>
      </view>
    </view>
    
    <!-- 商品列表区域 -->
    <view class="product-list">
      <view class="product-item" v-for="(product, index) in orderInfo.products" :key="index">
        <image class="product-img" :src="product.image" mode="widthFix"></image>
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥{{ product.price }}</text>
          <text class="product-count">×{{ product.count }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 订单信息数据
      orderInfo: {
        orderNo: '12345678978456456456',
        orderTime: '2025-10-25 15:00:00',
        memberName: '张三',
        memberPhone: '152xxxxxxxx',
        memberCardNo: '25698745',
        totalAmount: '150.00',
        products: [
          {
            name: '东方树叶',
            price: '3.00',
            count: 2,
            image: '/static/images/dongfangshuye.png' // 请替换为实际图片路径
          },
          {
            name: '可口可乐',
            price: '3.00',
            count: 2,
            image: '/static/images/kekoukele.png' // 请替换为实际图片路径
          },
          {
            name: '娃哈哈矿泉水',
            price: '3.00',
            count: 2,
            image: '/static/images/wahaha.png' // 请替换为实际图片路径
          }
        ]
      }
    };
  },
  mounted() {
  	uni.setNavigationBarTitle({
  		title: this.$t('title.goodsSalesRecordDetail')
  	});
  },
};
</script>

<style scoped>
/* 页面容器 */
.order-detail-page {
  min-height: 100vh;
  background-color: #ffffff;
  padding: 16px;
  box-sizing: border-box;
}

/* 订单基本信息区域 */
.order-base-info {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 信息项样式 */
.info-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 最后一个信息项（非总额）移除边框 */
.info-item:not(.total-amount):last-child {
  border-bottom: none;
}

/* 标签样式 */
.info-label {
  font-size: 15px;
  color: #666666;
  width: 100px;
  flex-shrink: 0;
}

/* 值样式 */
.info-value {
  font-size: 15px;
  color: #333333;
  flex: 1;
  text-align: right;
  padding-left: 10px;
  word-break: break-all;
}

/* 订单总额样式 */
.total-amount {
  padding-top: 16px;
  padding-bottom: 0;
}

.total-amount .info-value {
  color: #ff4d4f;
  font-size: 16px;
  font-weight: 500;
}

/* 商品列表区域 */
.product-list {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* 商品项样式 */
.product-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

/* 最后一个商品项移除边框 */
.product-item:last-child {
  border-bottom: none;
}

/* 商品图片 */
.product-img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 12px;
  object-fit: cover;
}

/* 商品信息 */
.product-info {
  flex: 1;
  position: relative;
  padding-right: 80px;
}

/* 商品名称 */
.product-name {
  display: block;
  font-size: 15px;
  color: #333333;
  margin-bottom: 8px;
}

/* 商品价格 */
.product-price {
  font-size: 14px;
  color: #ff4d4f;
}

/* 商品数量 */
.product-count {
  position: absolute;
  right: 0;
  top: 30px;
  font-size: 14px;
  color: #666666;
}
</style>